<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String root = request.getContextPath();
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>相册</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
		<style>
<!--
.photo_area {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	padding-top:200px;
	height:200px;
}


/* this makes it possible to add next button beside scrollable */
.scrollable {
	float: left;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	background:
		url(<%=root%>/scripts/jquery-tools/scrollable/css/hori_large.png)
		no-repeat;
	display: block;
	width: 30px;
	height: 30px;
	float: left;
	margin: 40px 10px;
	cursor: pointer;
	font-size: 1px;
}

/* right */
a.right {
	background-position: 0 -30px;
	clear: right;
	margin-right: 0px;
}

a.right:hover {
	background-position: -30px -30px;
}

a.right:active {
	background-position: -60px -30px;
}

/* left */
a.left {
	margin-left: 0px;
}

a.left:hover {
	background-position: -30px 0;
}

a.left:active {
	background-position: -60px 0;
}

/* up and down */
a.up,a.down {
	background:
		url(<%=root%>/scripts/jquery-tools/scrollable/css/vert_large.png)
		no-repeat;
	float: none;
	margin: 10px 50px;
}

/* up */
a.up:hover {
	background-position: -30px 0;
}

a.up:active {
	background-position: -60px 0;
}

/* down */
a.down {
	background-position: 0 -30px;
}

a.down:hover {
	background-position: -30px -30px;
}

a.down:active {
	background-position: -60px -30px;
}

/* disabled navigational button */
a.disabled {
	visibility: hidden !important;
}

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable { /* required settings */
	position: relative;
	overflow: hidden;
	width: 680px;
	height: 120px;
	/* custom decorations */
	border: 1px solid #ccc;
	background-color:#e8e8e8;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items { /* this cannot be too large */
	width: 20000em;
	position: absolute;
	clear: both;
}

/* single scrollable item */
.scrollable img {
	float: left;
	margin: 20px 5px 20px 21px;
	background-color: #fff;
	padding: 3px;
	border: 1px solid #ccc;
	cursor: pointer;
	width: 100px;
	height: 75px;
}

/* active item */
.scrollable .active {
	border: 2px solid #000;
	z-index: 9999;
	position: relative;
}
-->
</style>
		<script type="text/javascript"
			src="<%=root%>/scripts/jquery-1.3.2.min.js"></script>
		<script src="<%=root%>/scripts/jquery-tools/js/jquery.tools.min.js"
			type="text/javascript"></script>
		<script type="text/javascript">
			<!--
			$(function() { 
			 $("div.scrollable").scrollable();  
			 });
			-->
		</script>
	</head>

	<body>
		<div class="photo_area">
			<!-- "previous page" action -->
			<a class="prevPage browse left"></a>
			<!-- root element for scrollable -->
			<div class="scrollable">
				<!-- root element for the items -->
				<div class="items">
					<!-- 1-5 -->
					<img
						src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
					<img
						src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
					<img
						src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
					<img
						src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
					<img
						src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" />
					<!-- 5-10 -->
					<img
						src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
					<img
						src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
					<img
						src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
					<img
						src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
					<img
						src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" />
					<!-- 10-15 -->
					<img
						src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
					<img
						src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
					<img
						src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
					<img
						src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
					<img
						src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" />
				</div>
			</div>

			<!-- "next page" action -->
			<a class="nextPage browse right"></a>
		</div>
	</body>
</html>
